

<template>
  <d2-container>
    <h3>拖曳班级空闲时间</h3>
    <h5>先添加老师，教务老师和教室到班级。 老师可以拖曳两次，第一次为教师，第二次为教务老师.   点击班级删除该班级排课，点击教室，老师删除老师</h5>
    <!-- <h5>不同班级</h5> -->
     
     <el-button type="primary" @click="submit" style="position: absolute;top:3vw;right:40px;">确认排课</el-button>
     <el-table :data="dayList" border style="width: 68%;display: inline-block;margin-right:1%;display: inline-block;position: relative;" stripe="stripe"  :span-method="objectSpanMethod" :cell-style="cellStyle">
       <el-table-column  prop='hour' label="时间/日期"></el-table-column>
      <el-table-column  label="周一">
        <template slot-scope="scope" >
        <div :data-id="0+'-'+(scope.$index * 7)"        
        draggable="false"
        @dragstart="onDragstart($event)"
        @dragend="onDragend($event)"
        @dragover="onDragover($event)"
        @drop="onDrop($event)" style="width:100%;height:100%;padding:0;margin: 0;">
<!--                   <div v-if="day1[scope.$index].first" :data-id="0+'-'+(scope.$index * 7)" @click="removeClass($event)">{{day1[scope.$index].class == undefined ? '' :  '班级:' + day1[scope.$index].class.name}}</div>
          <div v-if="day1[scope.$index].first" :data-id="0+'-'+(scope.$index * 7)" @click="removeClassroom($event)">{{day1[scope.$index].class.classroom == undefined ? '' :  '教室:' + day1[scope.$index].class.classroom.name}}</div>

          <div v-if="day1[scope.$index].first" :data-id="0+'-'+(scope.$index * 7)" @click="removeTeacher($event)">{{day1[scope.$index].class.teacher == undefined ? '' :  '老师:' + day1[scope.$index].class.teacher.name}}</div>
          <div v-if="day1[scope.$index].first" :data-id="0+'-'+(scope.$index * 7)" @click="removeRegistrar($event)">{{day1[scope.$index].class.registrar == undefined ? '' :  '教务:' + day1[scope.$index].class.registrar.name}}</div> -->
          <div :data-id="0+'-'+(scope.$index * 7)" >{{(day1[scope.$index].class == undefined)? '&nbsp;' : ''}}</div>
          <div v-for="(item, index2) in day1[scope.$index].class" :data-id="0+'-' + (scope.$index * 7) + '_' + index2" 
          :style="{'background-color': item.color}"  @click="removeClass($event)" style="width: 100%;height: 100%;line-height: 14px;text-align: center;padding: 5px;margin-bottom: 5px" >
            <!-- <p>{{item}}</p> -->
            <p :data-id="0+'-' + (scope.$index * 7) + '_' + index2" >{{item.name}}</p>
            <p :data-id="0+'-' + (scope.$index * 7) + '_' + index2" >{{item.course.name}}</p>
          </div>
        </div>
        </template>
      </el-table-column>
      <el-table-column  label="周二">
                <template slot-scope="scope">

        <div :data-id="0+'-'+(scope.$index * 7 + 1)"
        draggable="false"
        @dragstart="onDragstart($event)"
        @dragend="onDragend($event)"
        @dragover="onDragover($event)"
        @drop="onDrop($event)" style="width:100%;height:100%;padding:0;margin: 0;">
                  <!-- <div v-if="day2[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 1)" @click="removeClass($event)">{{day2[scope.$index].class.class == undefined ? '' :  '班级:' + day2[scope.$index].class.name}}</div>
          <div v-if="day2[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 1)" @click="removeClassroom($event)">{{day2[scope.$index].class.classroom == undefined ? '' :  '教室:' + day2[scope.$index].class.classroom.name}}</div>

          <div v-if="day2[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 1)" @click="removeTeacher($event)">{{day2[scope.$index].class.teacher == undefined ? '' :  '老师:' + day2[scope.$index].class.teacher.name}}</div>
          <div v-if="day2[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 1)" @click="removeRegistrar($event)">{{day2[scope.$index].class.registrar == undefined ? '' :  '教务:' + day2[scope.$index].class.registrar.name}}</div>-->
          <div :data-id="0+'-'+(scope.$index * 7 + 1)" >{{(day2[scope.$index].class == undefined) ? '&nbsp;' : ''}}</div>
                    <div v-for="(item, index2) in day2[scope.$index].class" :data-id="0+'-' + (scope.$index * 7 + 1) + '_' + index2" 
          :style="{'background-color': item.color}"  @click="removeClass($event)" style="width: 100%;height: 100%;line-height: 14px;text-align: center;padding: 5px;margin-bottom: 5px" >
            <p :data-id="0+'-' + (scope.$index * 7 + 1) + '_' + index2" >{{item.name}}</p>
            <p :data-id="0+'-' + (scope.$index * 7 + 1) + '_' + index2" >{{item.course.name}}</p>
            <!-- {{item}} -->
          </div>
        </div> 
        </template>
      </el-table-column>
      <el-table-column  label="周三">
                <template slot-scope="scope">

        <div :data-id="0+'-'+ (scope.$index * 7 + 2)"
        draggable="false"
        @dragstart="onDragstart($event)"
        @dragend="onDragend($event)"
        @dragover="onDragover($event)"
        @drop="onDrop($event)" style="width:100%;height:100%;padding:0;margin: 0;">
                <!--   <div v-if="day3[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 2)" @click="removeClass($event)">{{day3[scope.$index].class == undefined ? '' :  '班级:' + day3[scope.$index].class.name}}</div>
          <div v-if="day3[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 2)" @click="removeClassroom($event)">{{day3[scope.$index].class.classroom == undefined ? '' :  '教室:' + day3[scope.$index].class.classroom.name}}</div>

          <div v-if="day3[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 2)" @click="removeTeacher($event)">{{day3[scope.$index].class.teacher == undefined ? '' :  '老师:' + day3[scope.$index].class.teacher.name}}</div>
          <div v-if="day3[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 2)" @click="removeRegistrar($event)">{{day3[scope.$index].class.registrar == undefined ? '' :  '教务:' + day3[scope.$index].class.registrar.name}}</div> -->
          <div :data-id="0+'-'+(scope.$index * 7 + 2)" >{{(day3[scope.$index].class == undefined) ? '&nbsp;' : ''}}</div>
                    <div v-for="(item, index2) in day3[scope.$index].class" :data-id="0+'-' + (scope.$index * 7 + 2) + '_' + index2" 
          :style="{'background-color': item.color}"  @click="removeClass($event)" style="width: 100%;height: 100%;line-height: 14px;text-align: center;padding: 5px;margin-bottom: 5px" >
            <p :data-id="0+'-' + (scope.$index * 7 + 2) + '_' + index2" >{{item.name}}</p>
            <p :data-id="0+'-' + (scope.$index * 7 + 2) + '_' + index2" >{{item.course.name}}</p>
          </div>
        </div>
        </template>
      </el-table-column>
      <el-table-column  label="周四">
                <template slot-scope="scope">

        <div :data-id="0+'-'+ (scope.$index * 7 + 3)"
        draggable="false"
        @dragstart="onDragstart($event)"
        @dragend="onDragend($event)"
        @dragover="onDragover($event)"
        @drop="onDrop($event)" style="width:100%;height:100%;padding:0;margin: 0;">
                  <!-- <div v-if="day4[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 3)" @click="removeClass($event)">{{day4[scope.$index].class == undefined ? '' :  '班级:' + day4[scope.$index].class.name}}</div>
          <div v-if="day4[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 3)" @click="removeClassroom($event)">{{day4[scope.$index].class.classroom == undefined ? '' :  '教室:' + day4[scope.$index].class.classroom.name}}</div>

          <div v-if="day4[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 3)" @click="removeTeacher($event)">{{day4[scope.$index].class.teacher == undefined ? '' :  '老师:' + day4[scope.$index].class.teacher.name}}</div>
          <div v-if="day4[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 3)" @click="removeRegistrar($event)">{{day4[scope.$index].class.registrar == undefined ? '' :  '教务:' + day4[scope.$index].class.registrar.name}}</div> -->
          <div :data-id="0+'-'+(scope.$index * 7 +3)" >{{(day4[scope.$index].class == undefined) ? '&nbsp;' : ''}}</div>
                    <div v-for="(item, index2) in day4[scope.$index].class" :data-id="0+'-' + (scope.$index * 7 + 3) + '_' + index2" 
          :style="{'background-color': item.color}"  @click="removeClass($event)" style="width: 100%;height: 100%;line-height: 14px;text-align: center;padding: 5px;margin-bottom: 5px" >
            <p :data-id="0+'-' + (scope.$index * 7 + 3) + '_' + index2" >{{item.name}}</p>
            <p :data-id="0+'-' + (scope.$index * 7 + 3) + '_' + index2" >{{item.course.name}}</p>
          </div>
        </div>
        </template>
      </el-table-column>
      <el-table-column  label="周五">
                <template slot-scope="scope">

        <div :data-id="0+'-'+(scope.$index * 7 + 4)"
        draggable="false"
        @dragstart="onDragstart($event)"
        @dragend="onDragend($event)"
        @dragover="onDragover($event)"
        @drop="onDrop($event)" style="width:100%;height:100%;padding:0;margin: 0;">
                  <!-- <div v-if="day5[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 +4)" @click="removeClass($event)">{{day5[scope.$index].class == undefined ? '' :  '班级:' + day5[scope.$index].class.name}}</div>
          <div v-if="day5[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 4)" @click="removeClassroom($event)">{{day5[scope.$index].class.classroom == undefined ? '' :  '教室:' + day5[scope.$index].class.classroom.name}}</div>

          <div v-if="day5[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 4)" @click="removeTeacher($event)">{{day5[scope.$index].class.teacher == undefined ? '' :  '老师:' + day5[scope.$index].class.teacher.name}}</div>
          <div v-if="day5[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 4)" @click="removeRegistrar($event)">{{day5[scope.$index].class.registrar == undefined ? '' :  '教务:' + day5[scope.$index].class.registrar.name}}</div> -->
          <div :data-id="0+'-'+(scope.$index * 7 + 4)" >{{(day5[scope.$index].class == undefined) ? '&nbsp;' : ''}}</div>
                    <div v-for="(item, index2) in day5[scope.$index].class" :data-id="0+'-' + (scope.$index * 7 + 4) + '_' + index2" 
          :style="{'background-color': item.color}"  @click="removeClass($event)" style="width: 100%;height: 100%;line-height: 14px;text-align: center;padding: 5px;margin-bottom: 5px" >
            <p :data-id="0+'-' + (scope.$index * 7 + 4) + '_' + index2" >{{item.name}}</p>
            <p :data-id="0+'-' + (scope.$index * 7 + 4) + '_' + index2" >{{item.course.name}}</p>
          </div>
        </div>
        </template>
      </el-table-column>
      <el-table-column label="周六">
                <template slot-scope="scope">

        <div :data-id="0+'-'+(scope.$index * 7 + 5)"
        draggable="false"
        @dragstart="onDragstart($event)"
        @dragend="onDragend($event)"
        @dragover="onDragover($event)"
        @drop="onDrop($event)" style="width:100%;height:100%;padding:0;margin: 0;">
                 <!--  <div v-if="day6[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 +5)" @click="removeClass($event)">{{day6[scope.$index].class == undefined ? '' :  '班级:' + day6[scope.$index].class.name}}</div>
          <div v-if="day6[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 5)" @click="removeClassroom($event)">{{day6[scope.$index].class.classroom == undefined ? '' :  '教室:' + day6[scope.$index].class.classroom.name}}</div>

          <div v-if="day6[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 5)" @click="removeTeacher($event)">{{day6[scope.$index].class.teacher == undefined ? '' :  '老师:' + day6[scope.$index].class.teacher.name}}</div>
          <div v-if="day6[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 5)" @click="removeRegistrar($event)">{{day6[scope.$index].class.registrar == undefined ? '' :  '教务:' + day6[scope.$index].class.registrar.name}}</div> -->
          <div :data-id="0+'-'+(scope.$index * 7 + 5)" >{{(day6[scope.$index].class == undefined) ? '&nbsp;' : ''}}</div>
                    <div v-for="(item, index2) in day6[scope.$index].class" :data-id="0+'-' + (scope.$index * 7 + 5) + '_' + index2" 
          :style="{'background-color': item.color}"  @click="removeClass($event)" style="width: 100%;height: 100%;line-height: 14px;text-align: center;padding: 5px;margin-bottom: 5px" >
            <p :data-id="0+'-' + (scope.$index * 7 + 5) + '_' + index2" >{{item.name}}</p>
            <p :data-id="0+'-' + (scope.$index * 7 + 5) + '_' + index2" >{{item.course.name}}</p>
          </div>
        </div>
        </template>
      </el-table-column>
      <el-table-column label="周日">
                <template slot-scope="scope">

        <div :data-id="0+'-'+(scope.$index * 7 +6)"
        draggable="false"
        @dragstart="onDragstart($event)"
        @dragend="onDragend($event)"
        @dragover="onDragover($event)"
        @drop="onDrop($event)" style="width:100%;height:100%;padding:0;margin: 0;">
                  <!-- <div v-if="day7[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 6)" @click="removeClass($event)">{{day7[scope.$index].class == undefined ? '' :  '班级:' + day7[scope.$index].class.name}}</div>
          <div v-if="day7[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 6)" @click="removeClassroom($event)">{{day7[scope.$index].class.classroom == undefined ? '' :  '教室:' + day7[scope.$index].class.classroom.name}}</div>

          <div v-if="day7[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 6)" @click="removeTeacher($event)">{{day7[scope.$index].class.teacher == undefined ? '' :  '老师:' + day7[scope.$index].class.teacher.name}}</div>
          <div v-if="day7[scope.$index].first" :data-id="0+'-'+(scope.$index * 7 + 6)" @click="removeRegistrar($event)">{{day7[scope.$index].class.registrar == undefined ? '' :  '教务:' + day7[scope.$index].class.registrar.name}}</div> -->
          <div :data-id="0+'-'+(scope.$index * 7 + 6)" >{{(day7[scope.$index].class == undefined) ? '&nbsp;' : ''}}</div>
                    <div v-for="(item, index2) in day7[scope.$index].class" :data-id="0+'-' + (scope.$index * 7 + 6) + '_' + index2" 
          :style="{'background-color': item.color}"  @click="removeClass($event)" style="width: 100%;height: 100%;line-height: 14px;text-align: center;padding: 5px;margin-bottom: 5px" >
            <p :data-id="0+'-' + (scope.$index * 7 + 6) + '_' + index2" >{{item.name}}</p>
            <p :data-id="0+'-' + (scope.$index * 7 + 6) + '_' + index2" >{{item.course.name}}</p>
          </div>
        </div>
        </template>
      </el-table-column>
    </el-table> 


     <el-table :data="classList" border style="width: 10%;display: inline-block;display: inline-block;position: relative;vertical-align: top" stripe="stripe" >
       <el-table-column   label="班级列表">
         <template slot-scope="scope" type="index">
          <div :data-id="1+'-'+scope.$index"
        draggable="true"
        @dragstart="onDragstart($event)"
        @dragend="onDragend($event)"
        @dragover="onDragover($event)"
        @drop="onDrop($event)">

      <div :data-id="1+'-'+scope.$index">{{classList[scope.$index].name}}</div>
      <div v-if="classList[scope.$index].teacher != undefined" :data-id="1+'-'+scope.$index"  @click="removeTeacher($event)">老师：{{classList[scope.$index].teacher.name}}</div>
      <div v-if="classList[scope.$index].registrar != undefined" :data-id="1+'-'+scope.$index" @click="removeRegistrar($event)">教务：{{classList[scope.$index].registrar.name}}</div>
      <div v-if="classList[scope.$index].classroom != undefined" :data-id="1+'-'+scope.$index" @click="removeClassroom($event)">教室：{{classList[scope.$index].classroom.name}}</div>
      <div  :data-id="1+'-'+scope.$index" @click="removeClassroom($event)">课程：{{classList[scope.$index].course.name}}</div>
      <div :data-id="1+'-'+scope.$index" @click="removeClassroom($event)">时长：{{classList[scope.$index].course.duration / 2}} 小时</div>
    </div>
        </template>
       </el-table-column>
     </el-table>

     <el-table :data="staffList" border style="width: 10%;display: inline-block;display: inline-block;position: relative;vertical-align: top" stripe="stripe">
       <el-table-column   label="老师/教务列表">
         <template slot-scope="scope">
          <div :data-id="2+'-'+scope.$index"
        draggable="true"
        @dragstart="onDragstart($event)"
        @dragend="onDragend($event)"
        @dragover="onDragover($event)"
        @drop="onDrop($event)">{{staffList[scope.$index].name}}</div>
        </template>
       </el-table-column>
     </el-table>

     <el-table :data="classroomList" border style="width: 10%;display: inline-block;display: inline-block;position: relative;vertical-align: top" stripe="stripe">
       <el-table-column   label="教室列表">
         <template slot-scope="scope">
          <div :data-id="3+'-'+scope.$index"
        draggable="true"
        @dragstart="onDragstart($event)"
        @dragend="onDragend($event)"
        @dragover="onDragover($event)"
        @drop="onDrop($event)">{{classroomList[scope.$index].name}}</div>
        </template>
       </el-table-column>
     </el-table>



  </d2-container>
</template>

<script>
  import util from '@/libs/util.js'
import request from "@/plugin/axios";

export default {
  data() {
    return {
      startIndex: "",
      endIndex: "",
      layoutType: "9",
      oindex : 16,
      dayList : [{hour:'8:00'},{hour:'8:30'},{hour:'9:00'},{hour:'9:30'},{hour:'10:00'},{hour:'10:30'},{hour:'11:00'},{hour:'11:30'},{hour:'12:00'},{hour:'12:30'},{hour:'13:00'},{hour:'13:30'},{hour:'14:00'},{hour:'14:30'},{hour:'15:00'},{hour:'15:30'},{hour:'16:00'},{hour:'16:30'},{hour:'17:00'},{hour:'17:30'},{hour:'18:00'},{hour:'18:30'},{hour:'19:00'},{hour:'19:30'},{hour:'20:00'}],
      day1 : [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      day2 : [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      day3 : [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      day4 : [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      day5 : [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      day6 : [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      day7 : [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      blah : [],
      color : ['#A1D1FB','#B0F8C4','#F8B0D7','#F8BDB0','#DDB0F8'],
      color2: ['red'],
      classroomList : [],
      staffList : [],
      classList:[],
      classStatus : -1


    };
  },
  methods: {
    onDragstart(event) {
      this.startIndex = event.target.getAttribute("data-id");
    },
    onDragend(event) {
      console.log(this.startIndex,this.endIndex,'abu')
      let startGroupIndex = parseInt(this.startIndex.split("-")[0]);
      let startChildIndex = parseInt(this.startIndex.split("-")[1]);
      let endGroupIndex = parseInt(this.endIndex.split("-")[0]);
      let endChildIndex = parseInt(this.endIndex.split("-")[1]);
      console.log(endGroupIndex,startGroupIndex,'dsdsdas')
      if ((startGroupIndex != 0) && (startGroupIndex != 1) && (endGroupIndex == 1)){
        // 
          if (startGroupIndex == 2){ // staff
          // this.day1[rowindex].class = startGroupIndex
          if (this.classList[endChildIndex].teacher == undefined){
            this.classList[endChildIndex].teacher = this.staffList[startChildIndex]
                  this.classList.push('')
      this.classList.splice( -1,1)
          }
          else if (this.classList[endChildIndex].registrar == undefined){
            this.classList[endChildIndex].registrar = this.staffList[startChildIndex]
                  this.classList.push('')
      this.classList.splice( -1,1)
          }
          else{
            alert('该时间已经有老师了，请先取消')
          }


          // var name = 'day' + (columnindex + 1)
          // var theday = this.$data[name]
          // if (theday[rowindex].class == undefined){
          //   alert('请先添加班级')
          //   return 
          // }
          // // find all days has this class and check any teacher , if no teacher , add all

          // var index1 = this.classList.map(function(e){return e._id}).indexOf(theday[rowindex].class._id)
          // var teacherid = this.classList[index1].teacher
          // var registrar = this.classList[index1].registrar
          // // check if class has teacher
          //   if (teacherid == undefined){
          //     // this class has the teacher
          //     this.classList[index1].teacher = this.staffList[startChildIndex]

          //       this.$data[name].push('')
          //       this.$data[name].splice(this.$data[name].length -1,1)
                
          //    // }
              
          //   }
          //   else if (registrar == undefined){
          //     // this class has the teacher
          //     this.classList[index1].registrar = this.staffList[startChildIndex]
          //       this.$data[name].push('')
          //       this.$data[name].splice(this.$data[name].length -1,1)
                
          //     }
              
          //   else{
          //     alert('该时间已经有老师了，请先取消')
          //   }
          }


          else if (startGroupIndex == 3){ // class
          // this.day1[rowindex].class = startGroupIndex
          console.log(this.classList[endChildIndex],'gogoasd')
              if (this.classList[endChildIndex].classroom == undefined){
                this.classList[endChildIndex].classroom = this.classroomList[startChildIndex]
                this.classList.push('')
                 this.classList.splice( -1,1)
              }
              else{
                alert('该时间该教室已占用，请先取消')
              }

          // var name = 'day' + (columnindex + 1)
          // var theday = this.$data[name]
          //  if (theday[rowindex].class == undefined){
          //   alert('请先添加班级')
          //   return 
          // }
          //   if (theday[rowindex].class.classroom == undefined){
          //     this.$data[name][rowindex].class.classroom = this.classroomList[startChildIndex]
          //     //
          //     // check duration  -> row index + 1  -> occupied , row index + 2 occupied
          //     this.$data[name].push('')
          //     this.$data[name].splice(this.$data[name].length -1,1)


          //           var idid = this.$data[name][rowindex].class._id
          //           var index = this.classList.map(function(e){return e._id}).indexOf(idid)
          //           console.log(this.classList[index].classroom,'wwwwwbbbb')
          //   }
          //   else{
          //     alert('该时间该教室已占用，请先取消')
          //   }
          // }

      }
    }


      else if ((endGroupIndex == 0) && (startGroupIndex != 0)){
        // correct ones
        let rowindex = Math.floor(endChildIndex / 7)
        let columnindex = endChildIndex % 7
        // append data
        // check if the slot if empty
        // if class -> not happending at the same time at taken
        // if teacher -> add teacher 
        // if second teacher -> add registar 
        // if classroom, 
        if (startGroupIndex == 1){ // class
          // this.day1[rowindex].class = startGroupIndex
          // first check classrrom & teacher
          if (this.classList[startChildIndex].teacher == undefined){
            alert('请先添加班级老师')
            return 
          }
          if (this.classList[startChildIndex].registrar == undefined){
            alert('请先添加班级教务')
            return 
          }
          if (this.classList[startChildIndex].classroom == undefined){
            alert('请先添加班级教室')
            return 
          }

          var name = 'day' + (columnindex + 1)
          var theday = this.$data[name]
          var duration = this.classList[startChildIndex].course.duration
          // check if same classroom is used , same teacher 
          console.log(theday,'dsadas') //theday[rowindex] -> which hour has classes
          if (theday[rowindex].class != undefined){
          if (theday[rowindex].class.map(function(e){return e.class != undefined ? e.class._id : ''}).indexOf(this.classList[startChildIndex]._id) != -1){
            alert('已经添加了这个课程')
            return 
          }
          var good = true
          for (var i = 0; i < duration;i++){
            if (theday[rowindex+i].occupied){
              good = false
            }
          }
          
          // console.log(theday[rowindex].class,rowindex,'dsdsd')
          
          if (theday[rowindex].class.map(function(e){return e.teacher != undefined ? e.teacher._id : ''}).indexOf(this.classList[startChildIndex].teacher._id) != -1){
            alert('同一个老师不能同时多节课')
            return 
          }
        
          if (theday[rowindex].class.map(function(e){return e.registrar != undefined ? e.registrar._id : ''}).indexOf(this.classList[startChildIndex].registrar._id) != -1){
            alert('同一个教务不能同时多节课')
            return 
          }
          if (theday[rowindex].class.map(function(e){return e.classroom != undefined ? e.classroom._id : ''}).indexOf(this.classList[startChildIndex].classroom._id) != -1){
            alert('同一个教室同时不能上多节课')
            return 
          }
        }
              if (this.$data[name][rowindex].class == undefined){
                              this.$data[name][rowindex].class = [this.classList[startChildIndex]]

              }
              else{
                              this.$data[name][rowindex].class.push(this.classList[startChildIndex])

              }
              this.$data[name][rowindex].first = true
              this.$data[name][rowindex].occupied = true
              this.$data[name][rowindex].color = this.classList[startChildIndex].color
              this.$data[name][rowindex].duration = duration
              this.$data[name].push('')
              this.$data[name].splice( -1,1)
              // add hours to global
              var start = this.oindex + rowindex
              var end = this.oindex + rowindex + duration
              var index1 = this.classList.map(function(e){return e._id}).indexOf(this.classList[startChildIndex]._id)
              var index2 = this.classList[index1].hours.map(function(e){return e.day}).indexOf((columnindex + 1)%7)
              this.classList[index1].hours[index2].hours.push({start:start,end:end})

              for (var i = 1; i < duration ;i ++){
                this.$data[name][rowindex + i].class = this.classList[startChildIndex]
                this.$data[name][rowindex + i].first = false
                this.$data[name][rowindex + i].occupied = true
              } 
            

          }



      }

      // }
    },
    onDrop(event) {
      this.endIndex = event.target.getAttribute("data-id");
      console.log('endindex',this.endIndex,'bbb')

    },
    onDragover(event) {
      event.preventDefault();
    },

    removeClass(event){
      var startChildIndex = event.target.getAttribute("data-id").split("-")[1];
      let arrayIndex = parseInt(startChildIndex.split('_')[1])

      startChildIndex = parseInt(startChildIndex.split('_')[0])
      let rowindex = Math.floor(startChildIndex / 7)
      let columnindex = startChildIndex % 7
      var name = 'day' + (columnindex + 1)
      var index = this.classList.map(function(e){return e._id}).indexOf(this.$data[name][rowindex].class[arrayIndex]._id)
      var index2 = this.classList[index].hours.map(function(e){return e.day}).indexOf((columnindex+1)%7)
      var index3 = this.classList[index].hours[index2].hours.map(function(e){return e.start}).indexOf(rowindex + this.oindex)
      var duration = this.classList[index].course.duration
      if (index3 != -1){
        this.classList[index].hours[index2].hours.splice(index3,1) // remove hours 
      }

      // remove display
      if (this.$data[name][rowindex].class.length == 1){
        for (var  i= 0 ;i < duration ; i++){
          this.$data[name][rowindex + i] = {}
          this.$data[name].push('')
          this.$data[name].splice(- 1,1)
        }
              // this.$data[name][rowindex] = {}

      }
      else{
          this.$data[name][rowindex].class.splice(arrayIndex,1)
          // check duration , clear empty slots
          this.$data[name].push({})
          this.$data[name].splice(-1,1)


      }

      this.classList.push('')
      this.classList.splice(-1,1)    


    },


    removeTeacher(event){
      // let startChildIndex = parseInt(event.target.getAttribute("data-id").split("-")[1]);
      // let rowindex = Math.floor(startChildIndex / 7)
      // let columnindex = startChildIndex % 7
      // var name = 'day' + (columnindex + 1)
      // var duration = 2
      let index = parseInt(event.target.getAttribute("data-id").split("-")[1]);
      this.classList[index].teacher = undefined
      this.classList.push('')
      this.classList.splice(-1,1)
       // this.$data[name][rowindex].class.teacher = undefined
      
      // this.$data[name].push('')
      // this.$data[name].splice(this.$data[name].length -1,1)     


    },


    removeRegistrar(event){

      let index =parseInt(event.target.getAttribute("data-id").split("-")[1]);
      this.classList[index].registrar = undefined
      this.classList.push('')
      this.classList.splice(-1,1)

      // let startChildIndex = parseInt(event.target.getAttribute("data-id").split("-")[1]);
      // let rowindex = Math.floor(startChildIndex / 7)
      // let columnindex = startChildIndex % 7
      // var name = 'day' + (columnindex + 1)

      //  this.$data[name][rowindex].class.registrar = undefined

      // this.$data[name].push('')
      // this.$data[name].splice(this.$data[name].length -1,1)     


    },


    removeClassroom(event){
      // let startChildIndex = parseInt(event.target.getAttribute("data-id").split("-")[1]);
      // let rowindex = Math.floor(startChildIndex / 7)
      // let columnindex = startChildIndex % 7
      // var name = 'day' + (columnindex + 1)
      

      // this.$data[name][rowindex].class.classroom = undefined
      
      // this.$data[name].push('')
      // this.$data[name].splice(this.$data[name].length -1,1)     

      // var idid = this.$data[name][rowindex].class._id
      // var index = this.classList.map(function(e){return e._id}).indexOf(idid)
      // console.log(this.classList[index].classroom,'wwwww')


      let index = parseInt(event.target.getAttribute("data-id").split("-")[1]);
      this.classList[index].classroom = undefined
      this.classList.push('')
      this.classList.splice(-1,1)

    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }){
      var colspan = 1
      var rowspan = 1
      var newRowIndex = rowIndex  
      var newColumnIndex = columnIndex - 1
      // column start from 1
      if ((newRowIndex >= 0) && (newColumnIndex <= 6) && (newColumnIndex >= 0) && (newRowIndex < 25)){
        var day = 'day' + (newColumnIndex + 1)

        // console.log(day)
        if (this.$data[day][newRowIndex ].occupied){
          rowspan = 0
        }
        if (this.$data[day][newRowIndex].first){
          console.log(this.$data[day][newRowIndex])
          // console.log(this.$data[day][newRowIndex].map(function(e){return e.duration}),'ddsds')
          // rowspan = this.$data[day][newRowIndex].duration
          rowspan = Math.max.apply(Math,this.$data[day][newRowIndex].class.map(function(e){return e.course.duration}))

        }
      }

      return {
        rowspan : rowspan,
        colspan : 1
      }

    },

    cellStyle({row, column, rowIndex, columnIndex}){
            var newColumnIndex = columnIndex - 1
            var day = 'day' + (newColumnIndex + 1)
            var newRowIndex = rowIndex  

            if ((newRowIndex >= 0) && (newColumnIndex <= 6) && (newColumnIndex >= 0) && (newRowIndex < 24)){

              if (this.$data[day][rowIndex].color){
                  if (this.$data[day][rowIndex].class != undefined){
                    if (this.$data[day][rowIndex].class.length == 1){
                      return {
                        background :this.$data[day][rowIndex].class[0].color
                    }
                  }
                  
                }
            }
          }
          return {}
              
    },


    getClassroomList(data) {
      request({
        url: "/school/getClassroomList",
        method: "post",
        data: data
      }).then(res => {
        console.log(res,'ha')
        this.classroomList = [];
        this.classroomList = res.data;
        
      });
    },

    getTeacherList(data) {
      request({
        url: "/school/getTeacherList",
        method: "post",
        data: data
      }).then(res => {
        this.staffList = [];
        this.staffList = res.data;
      });
    },


    getClassList(data) {
      data.status = 0
      request({
        url: "/school/getClassList",
        method: "post",
        data: data
      }).then(res => {
        
        for (var i = 0 ; i<res.data.length;i++){ // class list 
          res.data[i].color = this.color[i%5]
          // class -> hours -> [day:0,hours:[]]
          for (var j = 0 ; j < res.data[i].hours.length;j++){ // class hours day 0 - 6
            var dayname = 'day' + (res.data[i].hours[j].day == 0 ? 7 : res.data[i].hours[j].day)
            if ( i == 1){
              console.log(j,dayname)
            }
            const duration = res.data[i].course.duration // half an hour
            if (res.data[i].hours[j].hours != undefined){
            for (var t= 0 ; t < res.data[i].hours[j].hours.length;t++){ // class hours day j , time slots 

              for (var z = 0 ; z < duration;z++){ // duration check
                // fill in dayx 
                // this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex + z].class = res.data[i]
                // this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex + z].teacher = res.data[i].teacher
                // this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex + z].registrar = res.data[i].registrar
                // this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex + z].classroom = res.data[i].classroom
                if (this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex + z] != undefined){
                                  this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex + z].occupied = true

                }


                if (z == 0){
                  this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex].first = true
                  this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex].duration = duration
                  this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex].color = res.data[i].color
                  if (this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex + z].class == undefined){
                    this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex + z].class = [res.data[i]]
                  }
                  else{
                    this.$data[dayname][res.data[i].hours[j].hours[t].start - this.oindex + z].class.push(res.data[i])
                  }
                }
              }
            }
          }
          this.$data[dayname].push('')
          this.$data[dayname].splice( -1,1)
          }
        }
        this.classList = res.data
        
      });
    },


    submit(){
      console.log(this.classList,'ahahahahah')
      // post to server &change classes & teachers & others
      request({
        url: "/school/arrangeClass",
        method: "post",
        data : {classList:this.classList}
      }).then(res => {
        console.log(res,'aha')
        this.classList = []
        this.day1 =[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
        this.day2 =[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
        this.day3 =[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
              this.day4 =[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
              this.day5 =[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
              this.day6 =[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
              this.day7 =[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
          var school = JSON.parse(util.cookies.get('school'))[0]._id;

        this.getClassList({'school':String(school)})
        this.getTeacherList({'school':String(school)})
        this.getClassroomList({'school':String(school)})
        // 返回数据
      });
    }



  },
  created(){
    console.log(util.cookies.get('school'))
      var school = JSON.parse(util.cookies.get('school'))[0]._id;
      this.getClassList({'school':String(school)})
      this.getTeacherList({'school':String(school)})
      this.getClassroomList({'school':String(school)})

      // get list of current classes,
      // get list of current teachers & staff
      // get lit of current classrooms
  }
};
</script>

<style>
html,body,d2-container,el-table,el-table-column{

width:100%;

height:100%;

}
</style>